<template>
  <div class="dashboard-page">
    <el-row :gutter="20">
      <el-col :span="14">
        <!-- 机构概述 -->
        <div class="grid-content bg-purple bg-left">
          <p>机构概述</p>
          <div class="box">
            <div class="box-left">
              <div class="name">{{ obj.organName }}</div>
              <div class="address">地址： {{ obj.organAddress }}</div>
              <div class="duty-people">
                负责人：{{ obj.principal + obj.phone }}
              </div>
              <el-button type="danger" plain>查看营业部分布</el-button>
            </div>

            <div class="box-right">
              <div class="item">
                <div class="label">分拣中心(个)</div>
                <div class="num">{{ obj.sortingCenterNumber }}</div>
              </div>

              <div class="item">
                <div class="label">营业部(个)</div>
                <div class="num">{{ obj.agencyNumber }}</div>
              </div>

              <div class="item">
                <div class="label">司机人数(个)</div>
                <div class="num">{{ obj.driverNumber }}</div>
              </div>

              <div class="item">
                <div class="label">快递员人数(个)</div>
                <div class="num">{{ obj.courierNumber }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <!-- 今日数据 -->
        <div class="grid-content bg-purple bg-left">
          <div class="header">
            <p>今日数据</p>
            <div class="refresh-box">
              <img class="imgis" src="@/assets/common/1.png" alt="">
              <div v-html="new Date().toLocaleString()" />
            </div>
          </div>
          <div class="right-info">
            <div class="info-left">
              <div class="label">订单金额(元)</div>
              <count-to :end-val="todatData.orderAmount" class="value" />
              <!-- <div id="test3" class="value">{{ todatData.orderAmount }}</div> -->
              <div class="bottom">
                <div>较昨日 + {{ todatData.orderAmountChanges }}</div>
                <img class="push" src="@/assets/common/3.png" alt="">
              </div>
            </div>

            <div class="info-left">
              <div class="label">订单数量(元)</div>
              <count-to :end-val="todatData.orderNumber" class="value" />
              <!-- <div id="test4" class="value">{{ todatData.orderNumber }}</div> -->
              <div class="bottom">
                <div>较昨日 + {{ todatData.orderNumberChanges }}</div>
                <img class="push" src="@/assets/common/3.png" alt="">
              </div>
            </div>

            <div class="info-left">
              <div class="label">运输任务(元)</div>
              <count-to :end-val="todatData.transportTaskNumber" class="value" />
              <!-- <div id="test5" class="value">{{ todatData.transportTaskNumber }}</div> -->
              <div class="bottom">
                <div>较昨日 + {{ todatData.transportTaskNumberChanges }}</div>
                <img class="push" src="@/assets/common/3.png" alt="">
              </div>
            </div>
          </div></div></el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="14">
        <!-- 待办任务 -->
        <div class="grid-content bg-purple">
          <div class="header">
            <p>
              待办任务
              <img class="link" src="@/assets/common/2.png" alt="">
            </p>
            <div class="refresh-box">
              <img class="linkk" src="@/assets/common/1.png" alt="">
              <div v-html="new Date().toLocaleString()" />
            </div>
          </div>
          <div class="footer">
            <div ref="chartBox" class="chart-box" style="height: 180px" />
            <div class="bottom-label">
              <div class="item">
                <span class="item-span">待取件</span>
                <span class="item-span1">
                  {{ backlog.waitingPickupNumber }}
                </span>
              </div>

              <div class="item">
                <span class="item-span">待派件</span>
                <span class="item-span2">
                  {{ backlog.waitingDispatchNumber }}
                </span>
              </div>

              <div class="item">
                <span class="item-span">未分配运输</span>
                <span class="item-span3">
                  {{ backlog.unassignedTransportTaskNumber }}
                </span>
              </div>

              <div class="item">
                <span class="item-span">超时运输</span>
                <span class="item-span4">
                  {{ backlog.timeoutTransportTaskNumber }}
                </span>
              </div>
            </div>
          </div>
        </div></el-col>
      <el-col :span="10">
        <!-- 执行中任务 -->
        <div class="grid-content bg-purple">
          <div class="header">
            <p>
              执行任务中
              <img class="header-link" src="@/assets/common/2.png" alt="">
            </p>
            <div class="refresh-box">
              <img class="refresh-box-linkk" src="@/assets/common/1.png">
              <div v-html="new Date().toLocaleString()" />
            </div>
          </div>
          <div class="footer">
            <div ref="chartBoxTow" class="chart-boxTow" style="height: 180px" />
            <div class="bottom-label-Tow">
              <div class="item">
                <span class="item-span">运输中</span>
                <span class="item-span1">
                  {{ todatData.taskInTransitNumber }}
                </span>
              </div>

              <div class="item">
                <span class="item-span">派送中</span>
                <span class="item-span2">
                  {{ todatData.taskInDeliveryNumber }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 常用功能 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="grid-content-item bg-purple">
          <div class="item-div">常用功能</div>
          <el-row :gutter="20">
            <el-col :span="4">
              <div class="item-for">
                <svg-icon class="svg-img" icon-class="kuaidizuoye" />
                <p>快递作业</p>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="item-for">
                <svg-icon class="svg-img" icon-class="yunshurenwu" />
                <p>运输任务</p>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="item-for">
                <svg-icon class="svg-img" icon-class="xianluguanli" />
                <p>线路管理</p>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="item-for">
                <svg-icon class="svg-img" icon-class="cheliangguanli" />
                <p>车辆管理</p>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="item-for">
                <svg-icon class="svg-img" icon-class="sijiguanli" />
                <p>司机管理</p>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="item-for">
                <svg-icon class="svg-img" icon-class="yunfeichaxun" />
                <p>运费查询</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content-link bg-purple">线路管理</div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content-link bg-purple">
          <div>运输任务</div>
          <el-table :data="list" stripe border style="width: 100%">
            <el-table-column prop="id" label="任务编号" width="150" />
            <el-table-column prop="startAgency" label="起始地" width="140" />
            <el-table-column prop="endAgency" label="目的地" width="140" />
            <el-table-column prop="licensePlate" label="车辆" width="130" />
            <el-table-column prop="status " label="任务状态" width="105">
              <template v-slot="{ row }">
                <span> {{ row.status === 2 ? "进行中" : "" }} </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content-link bg-purple">
          <div class="header-box">
            <div>订单总量</div>
            <div class="refresh-box">
              <div v-html="new Date().toLocaleString()" />
            </div>
          </div>
          <p class="header-box-p">单位: 笔</p>
          <div class="header-box-div">
            <div>
              <div id="test" class="num"> {{ mayObj.orderMaxNumber }} </div>
              <div class="label">订单最高值</div>
            </div>
            <div>
              <div id="test1" class="num"> {{ mayObj.orderAverageNumber }} </div>
              <div class="label">订单最高值</div>
            </div>
            <div>
              <div id="test2" class="num"> {{ mayObj.orderMinNumber }} </div>
              <div class="label">订单最高值</div>
            </div>
          </div>
          <div ref="chartBoxLine" class="chart-boxLine" style="height: 336px" />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content-link bg-purple">
          <div class="header-box">
            <div>订单发布</div>
            <div class="refresh-box">
              <div v-html="new Date().toLocaleString()" />
            </div>
          </div>
          <p class="header-box-p">单位: 笔</p>
          <div ref="chartBoxBar" class="chart-boxBar" style="height: 422px" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const addNumber = (start, end, id, interval) => {
  // console.log(id)
  document.getElementById(id)
  let i = start
  let Interval
  if (i < end) {
    Interval = setInterval(function() {
      i += interval // 设置每次增加的动态数字，可调整
      if (i > end) {
        clearInterval(Interval) // 清除setInterval的time，这个方法w3c可具体查看文档
        document.getElementById(id).innerHTML = end.toLocaleString() // 此赋值是为了避免最后一次增加过后的数据和真实数据不同
        i = 0
      } else {
        document.getElementById(id).innerHTML = i.toLocaleString()
      }
    }, 10) // 数据跳转的速度控制
  }
}
addNumber(0, 74423, 'test', 300)
addNumber(0, 12244, 'test1', 90)
addNumber(0, 25661, 'test2', 120)
import CountTo from 'vue-count-to'
import { getManager } from '@/api/dashboard'
import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {
  name: 'DashboardPage',
  components: {
    CountTo
  },
  data() {
    return {
      obj: {},
      backlog: {},
      todatData: {},
      list: [],
      mayObj: {}
    }
  },
  mounted() {
    const myChart = echarts.init(this.$refs.chartBox)
    const myChartTow = echarts.init(this.$refs.chartBoxTow)
    const myChartLine = echarts.init(this.$refs.chartBoxLine)
    const myChartBar = echarts.init(this.$refs.chartBoxBar)

    // 配置项
    const option = {
      series: [
        {
          type: 'liquidFill',
          data: [0.4], // 一个数据对应一条波纹 大小队形波纹的高度
          radius: '70%', // 图形的大小
          center: ['12%', '50%'], // 图形的位置
          label: {
            normal: {
              formatter: this.backlog.waitingPickupRate,
              textStyle: {
                fontSize: 20, // 百分比字体的大小
                rich: {
                  a: {
                    color: 'black',
                    fontSize: 0,
                    lineHeight: 50
                  },
                  b: {
                    color: '#ccc',
                    fontSize: 24,
                    lineHeight: 50
                  },
                  c: {
                    color: '#FFAA00',
                    fontSize: 36,
                    lineHeight: 50
                  }
                }
              }
            }
          },
          outline: {
            borderDistance: 8,
            itemStyle: {
              borderWidth: 1, //  外圈的边框大小
              borderColor: 'red', // 外圈的边框颜色
              shadowBlur: 20,
              shadowColor: 'rgba(0, 0, 0, 0.25)'
            }
          },
          backgroundStyle: {
            color: '#fee5e0', // 波纹没有覆盖的部分颜色
            borderColor: '#fff',
            borderWidth: 0, // 内圈的边框
            shadowColor: 'rgba(0, 0, 0, 0.3)',
            shadowBlur: 10
          },
          itemStyle: {
            color: '#df6040', // 波纹的颜色
            shadowBlur: 1,
            shadowColor: 'rgba(255, 170, 0, 0.4)'
          }
        },
        {
          type: 'liquidFill',
          data: [0.3], // 一个数据对应一条波纹 大小队形波纹的高度
          radius: '70%', // 图形的大小
          center: ['36%', '50%'], // 图形的位置
          label: {
            normal: {
              formatter: this.backlog.waitingDispatchRate,
              textStyle: {
                fontSize: 20, // 百分比字体的大小
                rich: {
                  a: {
                    color: 'black',
                    fontSize: 0,
                    lineHeight: 50
                  },
                  b: {
                    color: '#ccc',
                    fontSize: 24,
                    lineHeight: 50
                  },
                  c: {
                    color: '#FFAA00',
                    fontSize: 36,
                    lineHeight: 50
                  }
                }
              }
            }
          },
          outline: {
            borderDistance: 8,
            itemStyle: {
              borderWidth: 1, //  外圈的边框大小
              borderColor: '#fbd17e', // 外圈的边框的颜色
              shadowBlur: 20,
              shadowColor: 'rgba(0, 0, 0, 0.25)'
            }
          },
          backgroundStyle: {
            color: '#fef1d9', // 波纹没有覆盖的部分颜色
            borderColor: '#fff',
            borderWidth: 0, // 内圈的边框
            shadowColor: 'rgba(0, 0, 0, 0.3)',
            shadowBlur: 10
          },
          itemStyle: {
            color: '#fbc65f', // 波纹的颜色
            shadowBlur: 10,
            shadowColor: 'rgba(255, 170, 0, 0.4)'
          }
        },
        {
          type: 'liquidFill',
          data: [0.29], // 一个数据对应一条波纹 大小队形波纹的高度
          radius: '70%', // 图形的大小
          center: ['61%', '50%'], // 图形的位置
          label: {
            normal: {
              formatter: this.backlog.unassignedTransportTaskRate,
              textStyle: {
                fontSize: 20, // 百分比字体的大小
                rich: {
                  a: {
                    color: 'black',
                    fontSize: 0,
                    lineHeight: 50
                  },
                  b: {
                    color: '#ccc',
                    fontSize: 24,
                    lineHeight: 50
                  },
                  c: {
                    color: '#FFAA00',
                    fontSize: 36,
                    lineHeight: 50
                  }
                }
              }
            }
          },
          outline: {
            borderDistance: 8,
            itemStyle: {
              borderWidth: 1, //  外圈的边框大小
              borderColor: '#fbad60', // 外圈的边框的颜色
              shadowBlur: 20,
              shadowColor: 'rgba(0, 0, 0, 0.25)'
            }
          },
          backgroundStyle: {
            color: '#feebd7', // 波纹没有覆盖的部分颜色
            borderColor: '#fff',
            borderWidth: 0, // 内圈的边框
            shadowColor: 'rgba(0, 0, 0, 0.3)',
            shadowBlur: 10
          },
          itemStyle: {
            color: '#fb9d43', // 波纹的颜色
            shadowBlur: 10,
            shadowColor: 'rgba(255, 170, 0, 0.4)'
          }
        },
        {
          type: 'liquidFill',
          data: [0.41], // 一个数据对应一条波纹 大小队形波纹的高度
          radius: '70%', // 图形的大小
          center: ['87%', '50%'], // 图形的位置
          label: {
            normal: {
              formatter: this.backlog.timeoutTransportTaskRate,
              textStyle: {
                fontSize: 20, // 百分比字体的大小
                rich: {
                  a: {
                    color: 'black',
                    fontSize: 0,
                    lineHeight: 50
                  },
                  b: {
                    color: '#ccc',
                    fontSize: 24,
                    lineHeight: 50
                  },
                  c: {
                    color: '#FFAA00',
                    fontSize: 36,
                    lineHeight: 50
                  }
                }
              }
            }
          },
          outline: {
            borderDistance: 8,
            itemStyle: {
              borderWidth: 1, //  外圈的边框大小
              borderColor: '#ede397', // 外圈的边框的颜色
              shadowBlur: 20,
              shadowColor: 'rgba(0, 0, 0, 0.25)'
            }
          },
          backgroundStyle: {
            color: '#f9fade', // 波纹没有覆盖的部分颜色
            borderColor: '#fff',
            borderWidth: 0, // 内圈的边框
            shadowColor: 'rgba(0, 0, 0, 0.3)',
            shadowBlur: 10
          },
          itemStyle: {
            color: '#ebdf84', // 波纹的颜色
            shadowBlur: 10,
            shadowColor: 'rgba(255, 170, 0, 0.4)'
          }
        }
      ]
    }
    const optionTow = {
      series: [
        {
          type: 'liquidFill',
          data: [0.4], // 一个数据对应一条波纹 大小队形波纹的高度
          radius: '70%', // 图形的大小
          center: ['25%', '50%'], // 图形的位置
          label: {
            normal: {
              formatter: this.todatData.taskInTransitRate,
              textStyle: {
                fontSize: 20, // 百分比字体的大小
                rich: {
                  a: {
                    color: 'black',
                    fontSize: 0,
                    lineHeight: 50
                  },
                  b: {
                    color: '#ccc',
                    fontSize: 24,
                    lineHeight: 50
                  },
                  c: {
                    color: '#FFAA00',
                    fontSize: 36,
                    lineHeight: 50
                  }
                }
              }
            }
          },
          outline: {
            borderDistance: 8,
            itemStyle: {
              borderWidth: 1, //  外圈的边框大小
              borderColor: 'red', // 外圈的边框颜色
              shadowBlur: 20,
              shadowColor: 'rgba(0, 0, 0, 0.25)'
            }
          },
          backgroundStyle: {
            color: '#fee5e0', // 波纹没有覆盖的部分颜色
            borderColor: '#fff',
            borderWidth: 0, // 内圈的边框
            shadowColor: 'rgba(0, 0, 0, 0.3)',
            shadowBlur: 10
          },
          itemStyle: {
            color: '#df6040', // 波纹的颜色
            shadowBlur: 1,
            shadowColor: 'rgba(255, 170, 0, 0.4)'
          }
        },
        {
          type: 'liquidFill',
          data: [0.3], // 一个数据对应一条波纹 大小队形波纹的高度
          radius: '70%', // 图形的大小
          center: ['74%', '50%'], // 图形的位置
          label: {
            normal: {
              formatter: this.todatData.taskInDeliveryRate,
              textStyle: {
                fontSize: 20, // 百分比字体的大小
                rich: {
                  a: {
                    color: 'black',
                    fontSize: 0,
                    lineHeight: 50
                  },
                  b: {
                    color: '#ccc',
                    fontSize: 24,
                    lineHeight: 50
                  },
                  c: {
                    color: '#FFAA00',
                    fontSize: 36,
                    lineHeight: 50
                  }
                }
              }
            }
          },
          outline: {
            borderDistance: 8,
            itemStyle: {
              borderWidth: 1, //  外圈的边框大小
              borderColor: '#fbd17e', // 外圈的边框的颜色
              shadowBlur: 20,
              shadowColor: 'rgba(0, 0, 0, 0.25)'
            }
          },
          backgroundStyle: {
            color: '#fef1d9', // 波纹没有覆盖的部分颜色
            borderColor: '#fff',
            borderWidth: 0, // 内圈的边框
            shadowColor: 'rgba(0, 0, 0, 0.3)',
            shadowBlur: 10
          },
          itemStyle: {
            color: '#fbc65f', // 波纹的颜色
            shadowBlur: 10,
            shadowColor: 'rgba(255, 170, 0, 0.4)'
          }
        }
      ]
    }
    const optionLine = {
      // 提示框
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '8', '9', '10', '11', '12']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          symbolSize: 10, // 设置折线上圆点大小
          symbol: 'circle', // 设置拐点为实心圆
          itemStyle: {
            color: '#f85c38'
          },
          lineStyle: {
            width: 1, // 设置线宽
            type: 'solid', // 'dotted'虚线 'solid'实线
            color: '#e35c3c'
          },
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ]
          },

          areaStyle: {
            normal: {
              color: '#fae7e3'// 改变区域颜色
            }
          },
          emphasis: {
            focus: 'series'
          },
          data: [12244, 12244, 13312, 13312, 14132, 14132, 15532, 15532, 24322, 24322, 74423, 74423]
        }
      ]
    }
    const optionBar = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
          lineStyle: {
            color: '#aaaaaa'
          }
        }
      },
      legend: {},
      grid: {
        left: '1%',
        right: '%',
        bottom: '2%',
        top: '0%',
        containLabel: true
      },
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: ['澳门', '西藏', '青海', '宁夏', '海南', '甘肃', '吉林', '黑龙江', '天津', '新疆', '贵州', '内蒙古', '山西', '香港', '广西', '云南', '辽宁', '重庆', '江西', '陕西', '北京', '河北', '安徽', '上海', '福建', '台湾', '湖北', '四川', '河南', '浙江', '江苏', '湖南', '山东', '广东'],
        axisLabel: {
          fontSize: 8 // Y轴字体大小
          // margin: 0 // 设置y轴标签与轴线之间的距离
        }
      },
      series: [
        {
          itemStyle: {
            normal: {
              color: '#e15536' // 设置柱子颜色为红色
            }
          },
          type: 'bar',
          barWidth: 5, // 设置柱子宽度
          data: [100, 120, 140, 160, 180, 200, 220, 240, 260, 280, 300, 320, 350, 370, 380, 390, 400, 450, 550, 600, 700, 800, 950, 1050, 1200, 1300, 1400, 1600, 1700, 1900, 2100, 2200, 2400, 2500]
        }
      ]
    }
    // 使用配置项显示图表
    //  4水球
    myChart.setOption(option)
    // 2水球
    myChartTow.setOption(optionTow)
    // 折线图
    myChartLine.setOption(optionLine)
    // 柱状图
    myChartBar.setOption(optionBar)
  },
  async created() {
    const res = await getManager()
    console.log(res)
    // 机构概述
    this.obj = res.data.organOverview
    // 进入数据
    this.todatData = res.data.todayData
    // 待办任务
    this.backlog = res.data.backlog
    // 运输任务
    this.list = res.data.transportTaskList
    // 订单总量
    this.mayObj = res.data.orderLineChart
    console.log(this.mayObj)
  },
  methods: {}
}
</script>

<style lang="scss">
.dashboard-page {
  margin: 24px;
  margin-top: 0px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #fff;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  height: 290px;
  border-radius: 4px;
  min-height: 36px;
  padding: 25px 24px;
  font-size: 16px;
  p {
    margin-top: 0px;
    font-weight: 700;
  }
  .box {
    display: flex;
    .box-left {
      flex: 50%;
      padding-left: 10px;
      border-right: 1px solid #ebeef5;
      .name {
        font-size: 16px;
        margin-top: 20px;
        margin-bottom: 13px;
        font-weight: 400;
        color: #303133;
      }
      .address {
        font-size: 14px;
        color: #818693;
        margin-bottom: 8px;
      }
      .duty-people {
        font-size: 14px;
        color: #818693;
        margin-bottom: 23px;
      }
    }
    .box-right {
      display: flex;
      flex: 50%;
      width: 300px;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      .item {
        display: flex;
        flex: 50%;
        flex-direction: column;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-box-align: center;
        .label {
          font-size: 14px;
          margin-bottom: 10px;
        }
        .num {
          font-size: 32px;
          font-weight: 700;
          color: #e15536;
          cursor: pointer;
        }
      }
    }
  }
  .header {
    position: relative;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: baseline;
    align-items: baseline;
    .imgis {
      position: absolute;
      top: 6%;
      right: 26%;
      display: inline-block;
      width: 15px;
      height: 14px;
      background-repeat: no-repeat;
      background-size: contain;
      margin-right: 8px;
    }
    .link {
      position: absolute;
      top: -5%;
      left: 9%;
      width: 20px;
      height: 20px;
    }
    .linkk {
      top: 6%;
      right: 19%;
      position: absolute;
      width: 15px;
      height: 14px;
    }
    .header-link {
      top: -1%;
      right: 80%;
      position: absolute;
      width: 21px;
      height: 20px;
    }
    .refresh-box-linkk {
      top: 7%;
      right: 27%;
      position: absolute;
      width: 15px;
      height: 14px;
    }
  }
  .footer {
    .bottom-label {
      width: 780px;
      cursor: pointer;
      position: absolute;
      display: flex;
      justify-content: space-around;
      top: 235px;
      .item-span {
        font-weight: 700;
        margin-right: 3px;
      }
      .item-span1 {
        color: #e15536;
        font-weight: 700;
      }
      .item-span2 {
        color: #ffc257;
        font-weight: 700;
      }
      .item-span3 {
        color: #ff9739;
        font-weight: 700;
      }
      .item-span4 {
        color: #dfcb59;
        font-weight: 700;
      }
    }
    .bottom-label-Tow {
      width: 536px;
      cursor: pointer;
      position: absolute;
      display: flex;
      justify-content: space-around;
      top: 235px;
      .item-span {
        font-weight: 700;
        margin-right: 3px;
      }
      .item-span1 {
        color: #e15536;
        font-weight: 700;
      }
      .item-span2 {
        color: #ffc257;
        font-weight: 700;
      }
    }
  }
  .right-info {
    width: 550px;
    height: 139px;
    margin-top: 16px;
    padding-left: 10px;
    display: flex;
    .info-left {
      width: 33%;
      display: flex;
      flex-direction: column;
      text-align: center;
      // justify-content: center;
      .label {
        font-size: 14px;
        color: #20232a;
        margin-bottom: 21px;
      }
      .value {
        font-size: 36px;
        color: #20232a;
        font-weight: 700;
        margin-bottom: 24px;
      }
      .bottom {
        display: flex;
        font-size: 14px;
        color: #818693;
        margin-bottom: 20px;
        justify-content: center;
        padding-left: 9px;
        .push {
          display: inline-block;
          width: 15px;
          height: 15px;
          background-repeat: no-repeat;
          background-size: contain;
        }
      }
    }
  }
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.grid-content-item {
  height: 190px;
  padding: 20px;
}
.grid-content-link {
  height: 484px;
  padding: 23px 20px;
}
.bg-left {
  height: 235px;
}
.item-div {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}
.item-for {
  height: 116px;
  // margin-top: 16px;
  border-radius: 10px;
  cursor: pointer;
  background-color: #fafafb;
  text-align: center;
  line-height: 15px;
  .svg-img {
    width: 40px;
    height: 40px;
    margin-top: 25px;
  }
  p {
    font-size: 16px;
    color: #20232a;
    font-weight: 700;
    &:hover {
      color: #dd5938;
    }
  }
}
.header-box {
  display: flex;
  justify-content: space-between;
}
.header-box-p {
  margin-top: 12px;
  margin-bottom: 5px;
  font-size: 10px;
  color: #818693;
}
.header-box-div {
  display: flex;
  justify-content: space-evenly;
  margin-top: 30px;
  .num {
    font-size: 28px;
    color: #e15536;
    font-weight: 700;
    text-align: center;
    margin-bottom: 5px;
  }
  .label {
    font-size: 12px;
    color: #818693;
    text-align: center;
  }
}
.tabale-p {
  margin-bottom: 0px;
}
.el-table td,
.el-table th.is-leaf {
  text-align: center;
  height: 50px;
}
.el-table__body-wrapper::after {
  display: none;
}
</style>
